<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            color:red;
            margin-left:20px;
            display:inline-block;
        }
        .c{
            color:red;
            margin-left:4px;
            display:inline-block;
        }
        .l{
            font-size:18px;
        }
        .d{
            height:35px;
            width:300px;
            display:inline;
        }
        .i{
            height:30px;
            width:300px;
        }


    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div style="height:80px;"></div>
    <form enctype="multipart/form-data">
        <div style="width:500px;float:left;margin:0 20px;">
            <div style="font-size:28px;">创建商品</div>
            <br/>
            <span class="p">*</span>
            <label for="title" class="l">商品名称:</label>
            <div style="height:35px;width:300px;position:relative;display:inline;">
                <input id="title" type="text" style="height:30px;width:250px;padding-right:50px;">
                <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;" ></span>
            </div>
            <br/><br/>
            <span class="p">*</span>
            <label for="description" class="l">商品描述:</label>
            <div  class="d">
                <input id="description" type="text" class="i">
            </div>
            <br/><br/>
            <span class="c">*</span>
            <label for="price" class="l">价格:</label>
            <div  class="d">
                <input id="price" type="text" class="i">
            </div>
            <br/><br/>
            <span class="c">*</span>
            <label for="stock" class="l">库存:</label>
            <div  class="d">
                <input id="stock" type="text" class="i">
            </div>
            <br/><br/>
            <label for="imgUrl" class="l">图片:</label>
            <div  class="d">
                <input id="imgUrl" type="text" class="i">
            </div>
            <br/><br/>

            <input type="submit" id="item" value="同意以上协议并注册" style="margin-left:100px;height:30px;width:300px;background-color:red;display:inline-block;"/>
        </div>
    </form>
    <script>

        $("#item").on("click",function () {
            var title = $("#title").val()
            var price = $("#price").val()
            var description = $("#description").val()
            var imgUrl = $("#imgUrl").val()
            var stock = $("#stock").val()
            $.ajax({
                type:"POST",
                contentType:"application/x-www-form-urlencoded",
                url:"http://localhost:8090/item/create",
                xhrFields: {withCredentials: true},
                data:{
                    "title":title,
                    "price":price,
                    "description":description,
                    "imgUrl":imgUrl,
                    "stock":stock,
                },
                success: function (data) {
                    if(data.status==="success"){
                        alert("创建商品成功")
                    }else {
                        alert("创建商品成功失败"+ data.data.errMsg)
                    }
                },
                error:function (data) {
                    alert("创建商品成功失败"+ data.responseText)
                }
            })
            return false

        })


    </script>
</body>
</html>
